import React, { Component } from 'react'
import Child2Child from './Child2Child';
import Child2Child2 from './Child2Child2';

export default class Child2 extends Component {
  constructor() {
    super()
    this.state = {
      val1: '',
      val2: '',
      val3: [],
      val4: '',
    }
    // 给这几个函数绑定this
    this.changeVal1 = this.changeVal1.bind(this);
    this.changeVal2 = this.changeVal2.bind(this);
    this.changeVal3 = this.changeVal3.bind(this);
    this.changeVal4 = this.changeVal4.bind(this);
    // ref的添加，通过React.createRef这个方法
    this.pRef = React.createRef();
    this.childRef = React.createRef();
  }
  changeVal1(e) {
    this.setState({
      val1: e.target.value
    })
  }
  changeVal2(e) {
    this.setState({
      val2: e.target.value
    })
  }
  changeVal3(e) {
    if (this.state.val3.includes(e.target.value)) {
      let index = this.state.val3.indexOf(e.target.value)
      // 数组中包含此项，又选择了这一项，就表示要删除
      this.state.val3.splice(index, 1)
    } else {
      this.state.val3.push(e.target.value)
    }
    let arr = this.state.val3;
    this.setState({
      val3: arr
    })
  }
  changeVal4(e) {
    this.setState({
      val4: e.target.value
    })
  }
  componentDidMount() {
    // 获取dom节点
    console.log(this.pRef.current);
    // this.pRef.current.innerHTML = 'hello' // 可以操作dom节点了
    // 获取组件。通过ref获取组件时，是将组件的实例作为参数传递的，function没有实例
    console.log(this.childRef.current);
  }
  render() {
    return (
      <div>
        <p ref={this.pRef}>react对于表单的处理：受控组件、非受控组件</p>
        <input type="text" value={this.state.val1} onChange={this.changeVal1} />
        <p>您输入的值：{this.state.val1}</p>
        <span>性别：</span>
        <label>男</label>
        <input type="radio" name="sex" value="nan" checked={this.state.val2 === "nan"} onChange={this.changeVal2} />
        <label>女</label>
        <input type="radio" name="sex" value="nv" checked={this.state.val2 === "nv"} onChange={this.changeVal2} />
        <p>您勾选的值：{this.state.val2}</p>
        <span>旅游城市：</span>
        <label>杭州</label>
        <input type="checkbox" name="city" value="hangzhou" checked={this.state.val3.includes("hangzhou")} onChange={this.changeVal3} />
        <label>苏州</label>
        <input type="checkbox" name="city" value="suzhou" checked={this.state.val3.includes("suzhou")} onChange={this.changeVal3} />
        <label>泉州</label>
        <input type="checkbox" name="city" value="quanzhou" checked={this.state.val3.includes("quanzhou")} onChange={this.changeVal3} />
        <p>您勾选的值：{JSON.stringify(this.state.val3)}</p>
        <span>收货地址：</span>
        <select value={this.state.val4} onChange={this.changeVal4}>
          <option value="school">学校</option>
          <option value="home">家</option>
          <option value="company">公司</option>
        </select>
        <p>您勾选的值：{this.state.val4}</p>
        <hr></hr>
        <span>非受控组件：type=file</span>
        <Child2Child
          ref={this.childRef}
          val4={this.state.val4}
        ></Child2Child>
        <Child2Child2
          val1={this.state.val1}
          val4={this.state.val4}
        ></Child2Child2>
      </div>
    )
  }
}
